import React, { useState, useEffect, useMemo } from 'react'
import { Toast, ActionSheet, Area } from 'react-vant'
import NavBar from '@components/NavBar'
import { ArrowDown } from '@react-vant/icons'
// import { areaList } from '@vant/area-data';
import options from './areaData'
import request from '@services/request'
import { Cascader } from 'antd-mobile'
import './styles/manage.less'




const AddressManage = (props) => {
  const [id] = useState(props.searchParams.get('id'))
  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const [detail, setDetail] = useState('')
  const [province, setProvince] = useState('')
  const [city, setCity] = useState('')
  const [county, setCounty] = useState('')
  const [visible, setVisible] = useState(false)

  const { publicKey, signMessage } = JSON.parse(
    localStorage.getItem('biwSign') || '{}'
  )

  useEffect(() => {
    if (id) {
      const addressData = props.state.listAddress.find(item => item.id === id)

      setName(addressData.name)
      setPhone(addressData.phone)
      setDetail(addressData.d)
      setProvince(addressData.a)
      setCity(addressData.b)
      setCounty(addressData.c)
    }
  }, [])

  const onCancel = () => setVisible(false)

  console.log('value', province ? [province.code, city.code, county.code] : [])

  const submit = async () => {
    if (!name) return Toast.info('请输入收货人')
    if (!phone) return Toast.info('请输入联系电话')
    if (!province) return Toast.info('请选择配送地址')
    if (!detail) return Toast.info('请输入详情地址')
    const params = {
      a: province,
      b: city,
      c: county,
      d: detail,
      name,
      status: props.state.listAddress.length > 0 && !id ? 0 : 1,
      phone,
      sign: signMessage,
      publicKey: publicKey
    }

    if (id) {
      params.id = Number(id)
    }

    try {
      let res = null

      if (id) {
        res = await request.post('app_server/update_address', params)
      } else {
        res = await request.post('app_server/create_address', params)
      }

      const userInfo = await request.get("app_server/user_info");
      props.setState(userInfo);
      props.navigate('/address', { replace: true })
    } catch (error) {
      console.log(error)
    }
  }

  const addressMemo = useMemo(() => {
    return (

      <div className="address-manage">
        <NavBar title="添加收货地址" />
        <div className="main">
          <div className="address-form">
            <div className="form-item">
              <label>收货人</label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="请填写您的姓名"
              />
            </div>
            <div className="form-item">
              <label>联系电话</label>
              <input
                type="number"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="请填写收货人的联系电话"
              />
            </div>
            <div className="form-item">
              <label>配送地址</label>
              <span className="form-select" onClick={() => setVisible(true)}>
                <p>
                  {!province && !city && !county
                    ? '省、市、区县'
                    : `${province}-${city}-${county}`}
                </p>
                <ArrowDown />
              </span>
            </div>
            <div className="form-item">
              <label>详细地址</label>
              <input
                type="text"
                value={detail}
                onChange={(e) => setDetail(e.target.value)}
                placeholder="请填写详细地址"
              />
            </div>
          </div>
          <div className="form-submit-btn" onClick={() => submit()}>
            完成
          </div>
        </div>

      <Cascader
        options={options}
        visible={visible}
        onConfirm={value => {
          if (value.length < 3) return false
          setProvince(value[0])
          setCity(value[1])
          setCounty(value[2])
        }}
        onClose={() => {
          setVisible(false)
        }}
      />
        {/* <ActionSheet visible={visible} onCancel={onCancel}>
          <Area
            title="请选择收货地址"
            value={province ? county.code : ''}
            areaList={areaList}
            onConfirm={(v) => {
              const [a, b, c] = v
              console.log(a)
              setProvince(a)
              setCity(b)
              setCounty(c)
              setVisible(false)
            }}
          />
        </ActionSheet> */}
      </div>
    )
  }, [name, phone, detail, province, city, county, visible])

  return (
    <>
      <div className="background"></div>
      {addressMemo}
    </>
  )
}

export default AddressManage
